<template>
  <div class="cash-filter-container">
    <el-form
      :inline="true"
      :model="filterData"
      size="small"
      class="filter-form-inline"
    >
      <el-row
        :gutter="40"
        style="margin-left: 0px; margin-right: 0px"
      >
        <el-col
          :lg="5"
          :xs="4"
          style="max-width:25%;padding-left:0px"
        >
          <el-form-item
            label="产品线"
            style="width: 100%"
            prop="productLineId"
          >
            <el-select
              v-model="filterData.productLineId"
              style="width: 100%"
              placeholder="全部"
              clearable
              @change="refreshList"
            >
              <el-option
                v-for="(item,index) in productLineOption"
                :key="index"
                :label="item.productLineName"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col
          :lg="5"
          :xs="4"
          style="max-width:25%"
        >
          <el-form-item
            label="适用地区"
            style="width: 100%"
            prop="codeList"
          >
            <el-cascader
              ref="cascader"
              v-model="filterData.codeList"
              :popper-append-to-body="false"
              style="width: 100%;"
              :options="citys.map(o => ({ ...o, 'children': null}))"
              placeholder="请选择适用地区"
              :props="{ checkStrictly: true, expandTrigger: 'hover', label: 'regionName', value:'regionCode' }"
              collapse-tags
              clearable
              @change="refreshList"
            />
          </el-form-item>
        </el-col>
        <el-col
          :lg="5"
          :xs="4"
          style="max-width:25%"
        >
          <el-form-item
            label="关键字"
            style="width: 100%"
            prop="keyWord"
          >
            <el-input
              v-model="filterData.keyWord"
              clearable
              placeholder="输入商品名、通用名、包装规格"
              @clear="refreshList"
            />
          </el-form-item>
        </el-col>
        <el-col
          :span="4"
          style="min-width: 170px;"
        >
          <el-form-item style="width: 100%">
            <el-button
              class="border-btn"
              @click="resetFilter"
            >重置</el-button>
            <el-button
              type="primary"
              class="main-btn"
              @click="refreshList"
            >搜索</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
  <div style="padding-bottom: 20px">
    <el-button
      v-auth="{v: ['crm:marketingPolicy:create']}"
      type="primary"
      size="small"
      @click="createMarketingPolicy"
    >新建营销政策</el-button>
  </div>
  <table-view
    header-cell-class-name="table-header"
    :data="listData"
    border
    :cell-style="cellStyle"
    @row-click="rowClick"
  >
    <el-table-column
      prop="marketingPolicyNo"
      label="政策编号"
      fixed="left"
      :width="140"
      show-overflow-tooltip
      header-align="center"
      align="center"
    />
    <el-table-column
      prop="productName"
      label="商品名"
      fixed="left"
      :width="140"
      show-overflow-tooltip
      header-align="center"
    />
    <el-table-column
      prop="productPopularName"
      label="通用名"
      fixed="left"
      :width="140"
      show-overflow-tooltip
      header-align="center"
    />
    <el-table-column
      prop="packSpecs"
      label="包装规格"
      header-align="center"
      :min-width="140"
      show-overflow-tooltip
    />
    <el-table-column
      prop="producer"
      label="生产厂家"
      header-align="center"
      :min-width="140"
      show-overflow-tooltip
    />
    <el-table-column
      :width="120"
      show-overflow-tooltip
      prop="productLineName"
      label="所属产品线"
      header-align="center"
    >
      <template #default="scope">
        <span> {{ scope.row.productLineName||'无' }}</span>
      </template>
    </el-table-column>
    <el-table-column
      prop="region"
      label="适用地区"
      header-align="center"
      align="center"
      :min-width="140"
      show-overflow-tooltip
    >
      <template #default="scope">
        <area-list-view :areas="scope.row.region" />
      </template>
    </el-table-column>
    <el-table-column
      label="政策文件"
      header-align="center"
      :min-width="200"
      show-overflow-tooltip
    >
      <template #default="scope">
        <upload-file-view
          :file-arr="scope.row?.files"
          :is-upload="false"
        />
      </template>
    </el-table-column>
    <el-table-column
      label="状态"
      :min-width="120"
      show-overflow-tooltip
      header-align="center"
      align="center"
      fixed="right"
    >
      <template #default="scope">
        <div>
          <span>{{ getLabel('marketing_policy_status', scope.row.marketingPolicyStatus) }}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column
      label="操作"
      :min-width="120"
      show-overflow-tooltip
      header-align="center"
      align="center"
      fixed="right"
    >
      <template #default="scope">
        <el-button
          v-auth="{v: ['crm:marketingPolicy:zuofei'], bool: scope.row.marketingPolicyStatus==='1'}"
          type="text"
          @click="obsolete(scope.row)"
        >作废</el-button>
      </template>
    </el-table-column>
  </table-view>
  <Pagination
    v-model:page="filterData.page"
    v-model:limit="filterData.pageSize"
    style="display: flex; justify-content: flex-end"
    :total="total"
    @pagination="getList"
  />
  <create-policy
    ref="createPolicyRef"
    @handleSuccess="refreshList"
  />
  <!-- 营销政策详情 -->
  <detail-drawer
    ref="policyDetailDrawer"
    custom-title
  >
    <template #title>
      <div
        class="draw-title"
        style="display:flex;justify-content:space-between;"
      >
        <div class="title-left">
          <span style="margin-right:5px;">营销政策详情 - {{ rowData?.marketingPolicyNo }}</span>
          <el-tag
            type="warning"
            size="small"
          >
            <span>{{ getLabel('marketing_policy_status', rowData?.marketingPolicyStatus) }}</span>
          </el-tag>
        </div>
        <div class="title-right">
          <div v-if="rowData?.marketingPolicyStatus==='1'">
            <el-button
              v-auth="{v: ['crm:marketingPolicy:zuofei']}"
              type="primary"
              class="main-btn"
              size="small"
              @click="obsolete(rowData)"
            >作废</el-button>
          </div>
        </div>
      </div>
    </template>
    <template #contents>
      <div class="drawer-content">
        <div class="history-list">
          <item-title title="基本信息" />
          <marketing-policy-info :detail-data="rowData" />
        </div>
        <div class="history-list">
          <item-title title="操作记录" />
          <operation-view
            :id="rowData.id"
            mode="marketing_policy"
          />
        </div>
      </div>
    </template>
  </detail-drawer>
</template>

<script>
import {defineAsyncComponent, defineComponent, getCurrentInstance, inject, onMounted, reactive, ref, toRefs,} from 'vue'
import {crmStore} from '@CRM/store'
import area from '@/utils/area.js'

export default defineComponent({
  components: {
    createPolicy: defineAsyncComponent(() =>
      import('../modules/createPolicy.vue')
    ),
    marketingPolicyInfo: defineAsyncComponent(() =>
      import('../modules/marketingPolicyInfo.vue')
    ),
  },
  setup() {
    const currentInstance = getCurrentInstance()
    const api = inject('api')
    var total = ref(0)
    var reactiveData = reactive({
      createPolicyRef: null,
      policyDetailDrawer: null,
      productLineOption: [],
      payerTypeOption:
        crmStore.getters['dictionary/getDictionary']['agent_type'],
      citys: area,
      filterData: {
        productLineId: '',
        payerType: '',
        keyWord: '',
        page: 1,
        pageSize: 20,
      },
      listData: [],
      rowData: null,
    })
    const cellStyle = (row) => {
      if (row.column.label === '操作') return
      return 'cursor: pointer;'
    }
    const rowClick = (row, column, event) => {
      console.log(row, column, column.label, event)
      if (column.label === '操作' || column.label === '政策文件') return
      reactiveData.rowData = row
      reactiveData.policyDetailDrawer.open()
    }
    const createMarketingPolicy = () => {
      reactiveData.createPolicyRef.open()
    }

    const getProductLine = () => {
      api.system.PRODUCTLINE_LIST().then((res) => {
        if (res.code === 0) {
          reactiveData.productLineOption = res.data.list
        }
      })
    }
    const getList = (row) => {
      console.log('列表')
      api.marketingPolicy
        .MARKETING_POLICY_LIST(reactiveData.filterData)
        .then((res) => {
          if (res.code === 0) {
            reactiveData.listData = res.data.list
            total.value = res.data.total
          }
        })
    }
    const resetFilter = () => {
      reactiveData.filterData = {
        productLineId: '',
        payerType: '',
        keyWord: '',
        page: 1,
        pageSize: 20,
      }
      getList()
    }
    // 作废
    const obsolete = (row) => {
      currentInstance.proxy
        .alertBox({
          message: '确定作废该营销政策数据？',
          title: '作废该营销政策',
        })
        .then(() => {
          api.marketingPolicy
            .MARKETING_POLICY_OBSOLETE({ id: row.id })
            .then((res) => {
              if (res.code === 0) {
                currentInstance.proxy.customMessage({
                  type: 'success',
                  message: '作废成功',
                })
                getList()
              }
            })
        })
    }

    // 更新列表
    const refreshList = () => {
      reactiveData.filterData.page = 1
      getList()
    }

    onMounted(() => {
      getList()
      getProductLine()
    })

    return {
      total,
      ...toRefs(reactiveData),
      cellStyle,
      rowClick,
      getList,
      refreshList,
      resetFilter,
      obsolete,
      createMarketingPolicy,
    }
  },
})
</script>

